{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "from flask import Flask, render_template\n",
    "from bokeh.embed import components\n",
    "from bokeh.resources import INLINE\n",
    "from bokeh.plotting import figure\n",
    "\n",
    "from bokeh.palettes import Spectral5\n",
    "from bokeh.sampledata.autompg import autompg as df\n",
    "from bokeh.transform import factor_cmap\n",
    "from bokeh.sampledata.autompg import autompg_clean as df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "ename": "IndentationError",
     "evalue": "expected an indented block (<ipython-input-6-e1ab444c3219>, line 36)",
     "output_type": "error",
     "traceback": [
      "\u001b[1;36m  File \u001b[1;32m\"<ipython-input-6-e1ab444c3219>\"\u001b[1;36m, line \u001b[1;32m36\u001b[0m\n\u001b[1;33m    if __name__ == '__main__':\u001b[0m\n\u001b[1;37m    ^\u001b[0m\n\u001b[1;31mIndentationError\u001b[0m\u001b[1;31m:\u001b[0m expected an indented block\n"
     ]
    }
   ],
   "source": [
    "app = Flask(__name__)\n",
    "\n",
    "@app.route('/')\n",
    "def hello_world():\n",
    "    return render_template(\n",
    "        'index.html'\n",
    "    )\n",
    "\n",
    "@app.route('/bokeh_demo')\n",
    "def bokeh_demo():\n",
    "    fig = figure(plot_width = 300, plot_height = 300)\n",
    "    fig.vbar(\n",
    "    x = [1, 2, 3, 4],\n",
    "    width = 0.5,\n",
    "    bottom = 0,\n",
    "    top = [1.7, 2.2, 4.6, 3.9],\n",
    "    color = 'navy'\n",
    "    )\n",
    "    \n",
    "    js_resources = INLINE.render_js()\n",
    "    css_resources = INLINE.render_css()\n",
    "    script, div = components(fig)\n",
    "    \n",
    "    html = render_template(\n",
    "    'index.html',\n",
    "    plot_script = script,\n",
    "    plot_div = div,\n",
    "    js_resources = js_resources,\n",
    "    css_resources = css_resources\n",
    "    )\n",
    "    return html\n",
    "\n",
    "@app.route('/bokeh_MPG')\n",
    "def bokeh_MPG():\n",
    "    df.cyl = df.cyl.astype(str)\n",
    "    group = df.groupby(['cyl'], ['mfr'])\n",
    "    index_cmap = factor_cmap('cyl_mfr', palette = Spectral5, factors = sorted(df.cyl.unique()), end = 1)\n",
    "    \n",
    "    p = figure(plot_width = 1000, plot_height = 500, title = 'Mean MPG by # Cylinders and Manufacturer',\n",
    "              x_range = group, tooltips = [('MPG', '@mpg_mean'), ('Cyl, Mfr', '@cyl_mfr')])\n",
    "    p.vbar(x = 'cyl_mfr', top = 'mpg_mean', width = 1, source = group,\n",
    "          line_color = 'white', fill_color = index_camp)\n",
    "    \n",
    "    p.y_range.start = 0\n",
    "    p.x_range.range_padding = 0.05\n",
    "    p.xgrid.grid_line_color = None\n",
    "    p.xaxis.axis_lable = 'Mean MPG by # Cylinders and Manufacturer'\n",
    "    p.xaxis.major_lable_orientation = 1.2\n",
    "    p.outline_line_color = None\n",
    "    \n",
    "    return p\n",
    "    \n",
    "if __name__ == '__main__':\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.3"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
